<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<title>湖南省自来水公司营销管理信息系统</title> 
	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />	
	
	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />

    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <script src="../js/vue.js"></script>
</head>
 
<body>

<div id="wrapper">
<div id="bool"></div>
	
	<div id="content" class="xgrid">
		
 		
		<div class="x12">
            <div id="facebox_delete"  style="display: none">
                <div style="height:80px;text-align:center;padding-top:50px;">
                    确认删除吗？
                </div>

                <div class="dialogbutton center">
                    <a class="btn" @click="del()" style="width:60px;">是</a>
                    <a class="btn btn-grey" href="javascript:closeDialog();" style="width:60px;">否</a>
                </div>
            </div>
			<h2>抄表辖区设置</h2>
			
			<p><button class="btn-icon btn-plus" onClick="location='sys_area_add.html';"><span></span>添加抄表辖区</button></p>
				
			<table class="data display">
					<thead>
						<tr>
							<th>抄表辖区ID</th>
							<th>抄表辖区名称</th>
							<th>备注</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr class="odd gradeX" v-for="sa in SysAreas">
							<td v-text="sa.id"></td>
							<td v-text="sa.areaName"></td>
							<td v-text="sa.remark"></td>
							<td class="center">
								<button class="btn-icon btn-small btn-blue btn-star" @click="update(sa.id)"><span></span>修改</button>
								<a href="#facebox_delete" @click="fuz(sa.id)"  rel="facebox" class="btn-icon btn-small btn-red btn-cross" ><span></span>删除</a>
							</td>
						</tr>
						<!--<tr class="even gradeC">-->
							<!--<td>2</td>-->
							<!--<td>城南区</td>-->
							<!--<td>四合大夏以南（含阳光巷子、添光巷子）</td>-->
							<!--<td class="center">-->
								<!--<button class="btn-icon btn-small btn-blue btn-star" onClick="location='sys_area_add.html';"><span></span>修改</button>  -->
								<!--<a href="#facebox_delete" rel="facebox" class="btn-icon btn-small btn-red btn-cross"><span></span>删除</a>-->
							<!--</td>-->
						<!--</tr>-->

						</tbody>
					</table>
			
		</div> <!-- .x12 -->
		
	</div> <!-- #content -->
	
	<div id="footer">		
		<div class="content_pad">			
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->
	
</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>
<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">
	

function  load() {
        $.getJSON("../SyArea/queryall",{},function(json){
            app.SysAreas=json;
        });
}
var app = new Vue({
    el:"#wrapper",
    data:{
        SysAreas:'',
        id:''
    },
    methods:{
          update(id){
              location="sys_area_add.html?id="+id;
          },
          del() {
              $.getJSON("/SyArea/del/" + this.id, {}, function (json) {
                  if (json == 1) {
                      load();
                  }
              });
          },
        fuz(id){
            this.id=id;
        }
    },
    watch:{
        SysAreas:function(){
            this.$nextTick(function(){
                $(document).ready ( function ()
                {
                    Dashboard.init ();
                });
            });
        }
    },
    created(){
       load();
    }
});
$("#bool").load("../ming.html");
</script>

</body> 

</html>